<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./css/小黑记账清单.css">

<body>
    <div id="app">
        <input type="text" placeholder="消费名称" class="in" v-model.trim="name">
        <input type="text" placeholder="消费价格" class="in" v-model.number="price">
        <button :style="{backgroundColor:'lightblue',border:'none',height:'30px',borderRadius:'5px'}"
            @click="add">添加账单</button>
        <table>
            <tr :style="{width:'800px'}">
                <th :style="{width:'200px'}">编号</th>
                <th :style="{width:'200px'}">消费名称</th>
                <th :style="{width:'200px'}">消费价格</th>
                <th :style="{width:'200px'}">操作</th>
            </tr>
            <tr v-for="(item,index) in list" :key="item.id" :style="{width:'800px'}">
                <td :style="{width:'200px'}">{{item.id}}</td>
                <td :style="{width:'200px'}">{{item.name}}</td>
                <td :style="{width:'200px'}">{{item.price}}</td>
                <td :style="{width:'200px'}"><a prevent :style="{color:'lightblue'}" @click="del(item.id)">删除</a></td>
            </tr>
            <tr :style="{width:'800px'}">
                <td :colspan=4>消费总计:{{ this.total }}</td>
            </tr>
        </table>
    </div>
    <div class="echarts-box" id="main">

    </div>
</body>

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            list: [],
            name: "",
            price: "",
        },
        // 请求数据
        created() {
            // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
            //     params: {
            //         creator: 'xiaohan'
            //     }
            // })
            // console.log(res)
            // this.list = res.data.data
            this.get()
        },
        computed: {
            // 消费总计
            total() {
                return this.list.reduce((sum, item) => {
                    return sum + Number(item.price)
                }, 0.0)
            }
        },
        methods: {
            async get() {
                const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
                    params: {
                        creator: 'xiaohan'
                    }
                })
                // console.log(res)
                this.list = res.data.data
                // 配置color颜色数组
                var colorList = ['#FFC367', '#DA9CFF',
                    '#5D84FF', '#B5C334', '#FCCE10', '#E87C25',
                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
                this.myChart.setOption({
                    series: [
                        {
                            // 自定义饼图颜色
                            color: colorList,
                            name: '小韩记账本',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: this.list.map((item) => ({ name: item.name, value: item.price }))
                        }
                    ]
                })
            },
            async del(id) {
                // 方式一：用data中的list数组删除
                // this.list = this.list.filter((item) => item.id !== id)

                // 方式二：发送删除请求删除后台数据
                const res = await axios.delete("https://applet-base-api-t.itheima.net/bill/" + id)
                // 因为删除的是后台数据，因此需要重新请求数据，所以可以将上面的请求数据，封装成函数，达到复用效果
                this.get()
            },
            add() {
                // console.log(this.name + " " + this.price)
                // 存储数据发送请求
                axios.post("https://applet-base-api-t.itheima.net/bill", {
                    creator: "xiaohan",
                    name: this.name,
                    price: this.price
                })
                this.name = ""
                this.price = ""
                this.get()
            }
        },
        // echarts图标
        mounted() {
            var chartDom = document.getElementById('main')
            this.myChart = echarts.init(chartDom)
            this.myChart.setOption({
                title: {
                    text: '小韩记账本',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                }
            })
        },
    })
</script>

</html>